<template>
  <page-layout class="project">
    <div class="search-wrapper">
      <div>
        <a-input
          placeholder="请输入项目名称"
          class="search-input"
          v-model="searchText"
        >
          <a-icon
            slot="prefix"
            type="search"
            style="font-size: 28px; color: #999"
          />
        </a-input>
        <a-button type="primary" class="search-button" @click="handelsearch"
          >搜索</a-button
        >
      </div>
      <a-button
        v-if="userInfo.permissions.projects_insert"
        style="width: 120px; height: 54px"
        type="primary"
        @click="
          $router.push({
            path: '/project/add',
            query: { random: random }
          })
        "
      >
        新增
      </a-button>
    </div>

    <!-- <a-card> -->
    <div class="tabel-wrapper">
      <!-- <div class="operator">
          <a-button @click="addNew" type="primary">新建</a-button>
          <a-button>批量操作</a-button>
          <a-dropdown>
            <a-menu @click="handleMenuClick" slot="overlay">
              <a-menu-item key="delete">删除</a-menu-item>
              <a-menu-item key="audit">审批</a-menu-item>
            </a-menu>
            <a-button> 更多操作 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </div> -->
      <standard-table
        :columns="columns"
        :dataSource="dataSource"
        @change="onChange"
        :pagination="pagination"
        size="large"
        :loading="loading"
        :scroll="{ x: 1900 }"
      >
        <div slot="team_names" slot-scope="{ text }">
          <a-tag color="blue" v-for="item in text" :key="item">
            {{ item }}
          </a-tag>
        </div>
        <div slot="introduce" slot-scope="{ text, record }">
          <a
            class="introduce"
            @click="lookIntroduce(text, record)"
            href="javascript:;"
          >
            点击查看
          </a>
        </div>
        <div slot="status" slot-scope="{ text, record }">
          <a-dropdown :trigger="['click']">
            <a-tag
              :style="`
              width: 120px;
              height: 30px;
              text-align: center;
              line-height: 30px;
            `"
              :color="projectStatus[text ? text - 1 : 0].color"
            >
              {{ projectStatus[text ? text - 1 : 0].text }}
            </a-tag>
            <a-menu
              slot="overlay"
              @click="(e) => changeProjectStatus(e, record.key)"
            >
              <a-menu-item
                v-for="(status, index) in project_status"
                :key="index"
                :disabled="index < record.status"
                :style="(background = 'backGround(index,record.status)')"
              >
                <a>{{ status.status }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <!-- eslint-disable-next-line -->
        <div slot="action" slot-scope="{ text, record }">
          <a
            :href="`#/project/detail?random=${random}&&id=${record.key}`"
            style="margin-right: 8px"
            >查看</a
          >
          <a
            v-if="userInfo.permissions.projects_edit"
            :href="`#/project/add?random=${random}&&id=${record.key}`"
            style="margin-right: 8px"
            >| 编辑</a
          >
          <a-popconfirm
            v-if="userInfo.permissions.projects_delete"
            title="确定删除此条项目吗?"
            ok-text="是的"
            cancel-text="取消"
            @confirm="() => confirm(record.key)"
            @cancel="() => cancel(record.key)"
          >
            <a>| 删除</a>
          </a-popconfirm>
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>
    <!-- 查看任务介绍弹窗 -->
    <a-modal
      :footer="null"
      :destroyOnClose="true"
      v-model="visible"
      title="任务记录"
      ok-text="确认"
      @ok="hideModal"
      @cancel="hideModal"
      width="580px"
      
    >
      <div v-html="introduceText"></div>
    </a-modal>
    <!-- 添加项目需求调研弹窗 -->
    <a-modal
      ref="model1"
      v-model="investigation_visible"
      title="添加项目需求调研"
      @cancel="changeHandleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="changeHandleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="changeHandleOk(15)"
        >
          添加
        </a-button>
      </template>
      <a-form
        id="components-form-demo-normal-login"
        ref="contacts"
        :form="form1"
        class="login-form"
        v-bind="{
          labelCol: { span: 6 },
          wrapperCol: { span: 14 }
        }"
      >
        <a-form-item label="调研负责人" :required="true">
          <a-select
            placeholder="请选择调研负责人"
            size="large"
            v-decorator="[
              'user_id',
              { rules: [{ required: true, message: '请选择调研负责人!' }] }
            ]"
          >
            <a-select-option
              v-for="item in userSelect"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="调研原因">
          <a-input
            v-decorator="[
              'reason',
              {
                rules: [{ required: true, message: '请输入调研原因!' }]
              }
            ]"
            placeholder="调研原因"
          >
          </a-input> </a-form-item
        ><a-form-item label="开始时间" :required="true">
          <a-date-picker
            size="large"
            placeholder="请选择开始时间"
            v-decorator="[
              'began_at',
              {
                rules: [
                  {
                    type: 'object',
                    required: true,
                    message: '请选择开始时间!'
                  }
                ]
              }
            ]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="结束时间" :required="true">
          <a-date-picker
            size="large"
            placeholder="请选择结束时间"
            v-decorator="[
              'end_at',
              {
                rules: [
                  {
                    type: 'object',
                    required: true,
                    message: '请选择结束时间!'
                  }
                ]
              }
            ]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="调研结果">
          <a-input
            v-decorator="[
              'result',
              {
                rules: [{ required: true, message: '请输入调研结果!' }]
              }
            ]"
            placeholder="调研结果"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="流程图">
          <a-upload-dragger
            v-decorator="[
              'flow_chat',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="flow_chat"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>
        <a-form-item label="思维导图">
          <a-upload-dragger
            v-decorator="[
              'mind_map',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="mind_map"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>
        <a-form-item label="功能表">
          <a-upload-dragger
            v-decorator="[
              'function_table',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="function_table"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>
        <a-form-item label="范围说明书">
          <a-upload-dragger
            v-decorator="[
              'scope_statement',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="scope_statement"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 添加原型图 -->
    <a-modal
      ref="model1"
      v-model="image_visible"
      title="添加项目原型图"
      @cancel="changeHandleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="changeHandleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="imageHandleOk()"
        >
          添加
        </a-button>
      </template>
      <a-form
        id="components-form-demo-normal-login"
        ref="contacts"
        :form="form2"
        class="login-form"
        v-bind="{
          labelCol: { span: 6 },
          wrapperCol: { span: 14 }
        }"
      >
        <a-form-item label="备注">
          <a-input
            v-decorator="[
              'remark',
              {
                rules: [{ required: false, message: '为该原型图添加备注!' }]
              }
            ]"
            placeholder="添加备注"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="项目原型图">
          <a-upload-dragger
            v-decorator="[
              'files',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="files"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #ddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传文件
            </p>
          </a-upload-dragger>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 添加技术分析结果 -->
    <a-modal
      ref="model1"
      v-model="result_visible"
      title="技术架构（项目拆解）"
      @cancel="changeHandleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="changeHandleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="ResultHandleOk()"
        >
          添加
        </a-button>
      </template>
      <a-form
        id="components-form-demo-normal-login"
        ref="contacts"
        :form="form3"
        class="login-form"
        v-bind="{
          labelCol: { span: 6 },
          wrapperCol: { span: 14 }
        }"
      >
        <a-form-item label="前端框架">
          <a-input
            v-decorator="[
              'front_frame',
              {
                rules: [{ required: false, message: '确定开发使用的前端框架!' }]
              }
            ]"
            placeholder="前端框架"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="前端开发时间">
          <a-input
            v-decorator="[
              'front_cost',
              {
                rules: [{ required: false, message: '确定前端开发时长' }]
              }
            ]"
            placeholder="前端开发时间"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="后端框架">
          <a-input
            v-decorator="[
              'backend_frame',
              {
                rules: [{ required: false, message: '确定开发使用的后端框架!' }]
              }
            ]"
            placeholder="后端框架"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="后端开发时间">
          <a-input
            v-decorator="[
              'backend_cost',
              {
                rules: [{ required: false, message: '确定后端开发时长' }]
              }
            ]"
            placeholder="后端开发时间"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="服务器地址">
          <a-input
            v-decorator="[
              'sever_address',
              {
                rules: [{ required: false, message: '确定服务器地址' }]
              }
            ]"
            placeholder="服务器地址"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="服务器负责人">
          <a-select
            placeholder="请选择服务器负责人"
            size="large"
            v-decorator="[
              'principal_id',
              { rules: [{ required: true, message: '请选择服务器负责人!' }] }
            ]"
          >
            <a-select-option
              v-for="item in userSelect"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 添加任务分解 -->
    <!--
    <a-modal
      ref="model1"
      v-model="task_visible"
      title="任务分解"
      @cancel="changeHandleCancel"
    >
      <a-card
        style="margin-top: 10px; margin-bottom: 10px"
        :loading="pageLoading"
      >
        <a-tabs default-active-key="1" @change="callback">

            <div class="time-content">
              <a-form :form="formPublish" @submit="handlePublish">
                <a-form-item>
                  <a-row style="width: 100%">
                    <a-col :span="16">
                      <a-textarea
                        size="large"
                        placeholder="发布跟进记录"
                        :autoSize="{ minRows: 2 }"
                        v-decorator="[
                          'remark',
                          {
                            rules: [
                              {
                                required: true,
                                message: '请输入跟进记录!'
                              }
                            ]
                          }
                        ]"
                      />
                    </a-col>
                    <a-col :span="8">
                      <a-button
                        type="primary"
                        html-type="submit"
                        style="margin-left: 13px; height: 50px; width: 100px"
                      >
                        发布
                      </a-button>
                    </a-col>
                  </a-row>
                </a-form-item>
              </a-form>
            </div>
              <div class="content-wrapper"  v-for="item in tasks" :key="item.id">
                <div class="time-content">
                  <div class="time-content-wrapper">
                    <div>
                      <div class="title">
                        {{ item.remark }}
                      </div>
                      <div class="name">操作人：{{ item.executor }}</div>
                    </div>
                    <div>
                      <a-button
                        @click="taskDelete(item.id)"
                        shape="circle"
                        icon="delete"
                      >
                      </a-button>
                      <a-button
                        :href="`#/demand/add?random=${random}&&id=${item.id}`"
                        shape="circle"
                        icon="delete"
                      >
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>
        
        </a-tabs>
      </a-card>   
    </a-modal>
    -->
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import StandardTable from "@/components/table/StandardTable";
import {
  getProjects,
  deleteItem,
  status,
  changeStatus,
  insertInvest,
  insertResult,
  insertTask,
  insertImage,
  tasks,
  taskDelete
} from "@/services/projects";
import { getUsersList } from "@/services/user";
// import { mapMutations } from "vuex";
const columns = [
  {
    title: "ID",
    dataIndex: "key",
    width: 60
  },
  {
    title: "所属部门",
    dataIndex: "department_name"
  },
  {
    title: "项目名称",
    dataIndex: "title"
  },

  {
    title: "创建者",
    dataIndex: "author_name"
  },
  {
    title: "开发团队",
    dataIndex: "team_names",
    scopedSlots: { customRender: "team_names" }
  },
  {
    title: "项目介绍",
    width: 200,
    dataIndex: "introduce",
    scopedSlots: { customRender: "introduce" }
  },
  {
    title: "项目开始时间",
    dataIndex: "start_time"
  },
  {
    title: "项目结束时间",
    dataIndex: "end_time"
  },
  {
    title: "项目状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },

  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 200,
    fixed: "right"
  }
];
export default {
  name: "demand",
  components: { PageLayout, StandardTable },
  data() {
    this.form1 = this.$form.createForm(this);
    this.form2 = this.$form.createForm(this);
    this.form3 = this.$form.createForm(this);
    return {
      image_visible: false, //项目原型图弹窗
      task_visible: false, //项目任务拆解弹窗
      result_visible: false, //项目技术分析弹窗
      record_id: "",
      tasks: [],
      investigation_visible: false, //项目需求调研弹窗
      changeConfirmLoading: false,
      userSelect: [],
      userInfo: [],
      title: "",
      introduceText: "",
      visible: false,
      searchText: "",
      random: "",
      loading: true,
      desc: "项目管理中心",
      columns: columns,
      dataSource: [],
      selectedRows: [],
      project_status: [],
      pagination: {
        size: "small",
        showSizeChanger: true,
        showQuickJumper: true,
        poposition: "bottom",
        pageSize: 5,
        current: 1,
        total: 0
      },
      projectStatus: [
        {
          color: "#2591FF",
          text: "项目立项"
        },
        {
          color: "#4E25FF",
          text: "需求调研"
        },
        {
          color: "#F56D25",
          text: "需求分析会议"
        },
        {
          color: "#FF6D25",
          text: "技术可行性分析",
          width: 400
        },
        {
          color: "blue",
          text: "分解任务"
        },
        {
          color: "blue",
          text: "开发阶段"
        },
        {
          color: "blue",
          text: "测试阶段"
        },
        {
          color: "yellowgreen",
          text: "项目验收"
        },
        {
          color: "#555",
          text: "维护"
        }
      ]
    };
  },
  authorize: {
    deleteRecord: "delete"
  },
  activated() {
    const { pageSize, current } = this.pagination;
    this.random = Math.random();
    this.loadTableData({ limit: pageSize, page: current });
    this.getProjectStatus;
  },
  created() {
    //获取用户下拉框内容
    getUsersList().then((res) => {
      if (res.data.code === 20000) {
        this.userSelect = res.data.data;
      }
    });
    let userInfo = JSON.parse(window.localStorage.getItem("admin.user"));
    this.userInfo = userInfo;
    // 初始数据
    const { pageSize, current } = this.pagination;
    this.random = Math.random();
    this.loadTableData({ limit: pageSize, page: current });
  },
  computed: {
    backGround() {
      return function (value, status) {
        console.log(value + "哇咔咔" + status);
        if (value < status) {
          return "#A8A8A8";
        }
      };
    }
  },
  methods: {
    //添加需求调研
    changeHandleOk() {
      this.form1.validateFields((err, values) => {
        if (err) {
        }
        insertInvest({ ...values, project_id: this.record_id }).then((res) => {
          if (res.data.code === 20000) {
            this.$message.success(res.data.message);
            this.form1.resetFields();
            const { pageSize, current } = this.pagination;
            this.loadTableData({ limit: pageSize, page: current });
          }
        });
      });
      this.ModalText = "The modal will be closed after two seconds";
      this.changeConfirmLoading = true;
      setTimeout(() => {
        this.investigation_visible = false;
        this.changeConfirmLoading = false;
      }, 2000);
    },
    //添加项目原型图
    imageHandleOk() {
      this.form2.validateFields((err, values) => {
        if (err) {
        }
        insertImage({ ...values, project_id: this.record_id }).then((res) => {
          if (res.data.code === 20000) {
            this.$message.success(res.data.message);
            this.form2.resetFields();
            const { pageSize, current } = this.pagination;
            this.loadTableData({ limit: pageSize, page: current });
          }
        });
      });

      this.ModalText = "The modal will be closed after two seconds";
      this.changeConfirmLoading = true;
      setTimeout(() => {
        this.image_visible = false;
        this.changeConfirmLoading = false;
      }, 2000);
    },
    //添加技术架构分解
    ResultHandleOk() {
      this.form3.validateFields((err, values) => {
        if (err) {
        }
        insertResult({ ...values, project_id: this.record_id }).then((res) => {
          if (res.data.code === 20000) {
            this.$message.success(res.data.message);
            this.form2.resetFields();
            const { pageSize, current } = this.pagination;
            this.loadTableData({ limit: pageSize, page: current });
          }
        });
      });
      this.ModalText = "The modal will be closed after two seconds";
      this.changeConfirmLoading = true;
      setTimeout(() => {
        this.result_visible = false;
        this.changeConfirmLoading = false;
      }, 2000);
    },
    //任务分解

    //关闭弹窗
    changeHandleCancel() {
      this.image_visible = false;
      this.investigation_visible = false;
      this.task_visible = false;
      this.result_visible = false;
    },
    changeProjectStatus(e, id) {
      let status = e.key;
      if (status == 2) {
        this.investigation_visible = true;
      }
      if (status == 3) {
        this.image_visible = true;
      }
      if (status == 4) {
        this.result_visible = true;
      }
      if (status == 5) {
        this.task_visible = true;
        tasks(id).then((res) => {
          if (res.data.code === 20009) {
            this.dynamicValidateForm.domains = res.data.data;
          }
        });
      }
      this.record_id = id;
      changeStatus({ id, status }).then((res) => {
        if (res.data.code === 20000) {
          this.$message.success(res.data.message);
          //状态修改完毕,刷新列表
          const { pageSize, current } = this.pagination;
          this.loadTableData({ limit: pageSize, page: current });
        }
      });
    },
    // 查看介绍详情关闭
    afterClose() {
      // 清除内容和title
      this.introduceText = "";
      this.title = "";
    },
    // 查看介绍详情
    lookIntroduce(text, record) {
      this.introduceText = text;
      this.visible = true;
      this.title = record.title;
    },
    // 请求table 的数据
    // obj 请求的字段
    loadTableData(obj) {
      this.loading = true;
      getProjects(obj).then(
        (res) => {
          // console.log(res.data, 222222);
          // 关闭loading
          this.loading = false;
          if (res.data.code === 20000) {
            const { current_page, total, per_page } = res.data.data;
            Object.assign(this.pagination, {
              total: parseInt(total),
              current: parseInt(current_page),
              pageSize: parseInt(per_page)
            });
            this.dataSource = res.data.data.data.map((item) => {
              // console.log(item);
              const {
                id,
                start_time,
                end_time,
                department_name,
                title,
                author_name,
                team_names,
                status_name,
                introduce,
                status
              } = item;
              return {
                key: id,
                start_time: start_time && start_time.split(" ")[0],
                end_time: end_time && end_time.split(" ")[0],
                title: title || "未知",
                author_name: author_name || "未知",
                team_names: team_names || "未知",
                introduce: introduce || "无",
                department_name: department_name || "未知",
                status_name,
                status
              };
            });
          }
        },
        status().then((res) => {
          //获取项目状态
          if (res.data.code === 20000) this.project_status = res.data.data;
        })
      );
    },
    handelsearch() {
      this.loadTableData({
        limit: this.pagination.pageSize,
        title: this.searchText
      });
      this.searchText = "";
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter((item) => item.key !== key);
      this.selectedRows = this.selectedRows.filter((item) => item.key !== key);
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange(e) {
      // console.log(e);
      const { current, pageSize } = e;
      this.loadTableData({ limit: pageSize, page: current });
    },
    handleMenuClick(e) {
      if (e.key === "delete") {
        this.remove();
      }
    },
    cancel(key) {
      this.$message.info(`点击了取消,行数为${key + 1}行`);
    },
    confirm(key) {
      // 发起删除的请求
      deleteItem(key).then((res) => {
        // console.log(res, "delete");
        // 成功
        if (res.data.code === 20000) {
          // 提示信息
          this.$message.success({
            content: res.data.message || "删除成功~"
          });
          // 删除成功后重新获取数据
          const { pageSize, current } = this.pagination;
          this.loadTableData({ limit: pageSize, page: current });
        } else {
          this.$message.error(res.data.message || "删除失败！");
        }
      });
      // this.$message.info(`点击了确定,行数为${key + 1}行`);
      // this.deleteRecord(key);
    },
    //图片上传方法
    handleChange(info) {
      const status = info.file.status;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        this.$message.success(`${info.file.name} 上传成功~`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    normFile(e) {
      console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  },
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert("submit!");
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  },
  removeDomain(item) {
    let index = this.de.indexOf(item);
    if (index !== -1) {
      this.tasks.splice(index, 1);
    }
  },
  addDomain() {
    this.tasks.push({
      value: "",
      key: Date.now()
    });
  }
};
</script>

<style lang="less">
.search-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  > div {
    .search-input input {
      padding-left: 45px !important;
    }
    display: flex;
    width: 60%;
    .ant-input-affix-wrapper {
      display: inline-block;
      width: calc(100% - 150px);
      height: 54px !important;
      input {
        height: 100% !important;
      }
      input::-webkit-input-placeholder {
        color: #9999;
        font-size: 16px;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #9999;
        font-size: 16px;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #9999;
        font-size: 16px;

        font-size: 17px;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #9999;
        font-size: 16px;
      }
    }
    .search-button {
      margin-left: 30px;
      width: 120px;
      height: 54px;
    }
  }
}
.project {
  .tabel-wrapper {
    border-radius: 5px;
    // .introduce {
    //   display: inline-block;
    //   width: 120px;
    //   overflow: hidden;
    //   white-space: nowrap;
    //   text-overflow: ellipsis;
    //   // text-align: center;
    // }
    // min-height: 450px;
    background-color: #fff;
    color: #1f1f1f;
    .ant-pagination {
      margin-top: 60px !important;
    }
    .ant-table-thead {
      padding-left: 20px;
      background: #effaff;
      & > tr > th {
        background: #effaff !important;
      }
    }
    .ant-table-tbody {
      padding-left: 20px;
    }
    .ant-table-pagination.ant-pagination {
      float: unset !important;
      text-align: center;
    }
  }
}
</style>
